import { TextInputDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.TextInput);

## Usage

<InputFeatures component="TextInput" element="input" />

<Demo data={TextInputDemos.usage} />

## Controlled

```tsx
import { useState } from 'react';
import { TextInput } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState('');
  return (
    <TextInput
      value={value}
      onChange={(event) => setValue(event.currentTarget.value)}
    />
  );
}
```

<InputSections component="TextInput" />

<Demo data={TextInputDemos.sections} />

## Error state

<Demo data={TextInputDemos.error} />

## Disabled state

<Demo data={TextInputDemos.disabled} />

<StylesApiSelectors component="TextInput" />

<Demo data={TextInputDemos.stylesApi} />

<GetElementRef component="TextInput" refType="input" />

<InputAccessibility component="TextInput" />
